<template>
  <div class="orderinfo">

    <Panel title="订单管理" useBack>
         
    </Panel>
    <div class="detail-body">

       <div class="top-detail back" style="margin-top:0">
          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark title1" style="padding: 20px;">订单编号：{{order.oid}}</div></el-col>
          </el-row>
           <div class="usersdiv">
            <div class="div-two"><div class="grid-content bg-purple">创建订单时间：{{order.createTime}}</div></div>
            <div class="div-two"><div class="grid-content bg-purple-light">充电时间：{{order.beginTime}}{{order.endTime ? " 至 "+order.endTime : ''}}</div></div>
          </div>
          <div class="usersdiv">
            <div class="div-two"><div class="grid-content bg-purple">充电状态：{{order.state==1 ? "等待处理中":order.state==2 ? "充电中":order.state==3 ? "充电停止中":order.state==4 ? "充电完成":order.state==5 ? "充电异常":order.state==6 ? "充电失败":"等待处理中"}}</div></div>
            <div class="div-two"><div class="grid-content bg-purple-light">支付状态：{{order.settlement == 1? '已结算':'未结算'}}</div></div>
          </div>
          <div class="usersdiv">
            <div class="div-two"><div class="grid-content bg-purple">充电电量：{{order.electricity}}度</div></div>
            <div class="div-two"><div class="grid-content bg-purple-light">充电时长：{{order.surplus}}</div></div>
          </div>
          <div class="usersdiv">
            <div class="div-two"><div class="grid-content bg-purple">超时占位费：{{order.surcharge}}元</div></div>
            <div class="div-two"><div class="grid-content bg-purple" style="display:flex;align-items: center;">
              <div>电量变化(初始-当前)：{{order.beginSoc ? order.beginSoc+"%":''}} </div> 
              <img src="@/assets/toright.png" alt="" style="width:30px;height:6px">
              <div>{{order.endSoc  ? order.endSoc +"%": order.soc+'%'}}</div>
              </div></div>
          </div>
          <el-row style="height: 30px;">
          </el-row>
      </div>
      
      <div class="user1 back" v-if="order.thirdOid">
        <el-row>
            <el-col :span="24"><div class="title-left"></div><div class="grid-content bg-purple-dark title1">第三方信息</div></el-col>
          </el-row>
        <div class="usersdiv">
          <div class="div-three"><div class="grid-content bg-purple-light">互联互通公司： {{order.nick}}</div></div>
          <div class="div-three"><div class="grid-content bg-purple-light">第三方订单编号：{{order.thirdOid}}</div></div>
          <div class="div-three"><div class="grid-content bg-purple">充电模式：
            {{order.chargeMode ==1 ? "市政无卡启动":order.chargeMode ==2 ? "平台无卡启动":order.chargeMode ==3 ? "平台有卡启动":order.chargeMode ==4 ? "互联互通无卡启动" : order.chargeMode ==5 ? "车辆VIN启动" : order.chargeMode ==6 ? '预约启动':"未知"}}
            </div>
          </div>
            
          </div>
          <el-row style="height: 30px;">
          </el-row>
      </div>
      <div class="user1 back">
        <el-row>
            <el-col :span="24"><div class="title-left"></div><div class="grid-content bg-purple-dark title1">电表度数</div></el-col>
          </el-row>
        <div class="usersdiv">
          <div class="div-three"><div class="grid-content bg-purple-light">充电开始时候电表读数： {{order.beginMeter}}</div></div>
          <div class="div-three"><div class="grid-content bg-purple-light">当前电表读数：{{order.currentMeter}}</div></div>
          <div class="div-three"><div class="grid-content bg-purple">充电结束时候电表读数：{{order.endMeter}}
            </div>
          </div>
            
          </div>
          <el-row style="height: 30px;">
          </el-row>
      </div>
      <div class="nav back" >
        <div class="navTab">
        <div class="navbar" v-for="(item,index) of navTab" :key="index" >
          <div :class="{'navbar-item': true,'active':currentTab ==item.id } " @click="changeTab(item.id)" >{{item.name}}</div>
        </div>
      </div>
      <div class="navbar-content">
          <div class="content-item" v-show="currentTab == 1" style="height: 100px">
            <el-steps :space="200" :active="order.active" align-center finish-status="success">
              <el-step title="创建订单" :description="order.createTime"></el-step>
              <el-step  title="开启充电" :description="order.beginTime"></el-step>
              <el-step :title="order.stateMsg" :description="order.endTime" :status="order.state==4?'success' : 'error'"></el-step>
              <el-step  title="已结算" :description="order.settlementTime "></el-step>
            </el-steps>
          </div>
          <div class="content-item" v-show="currentTab == 2">
            <el-table
            :data="orderLog"
            style="width: 100%">
            <el-table-column
              prop="msg"
              label="执行操作"
              width="180">
            </el-table-column>
            <el-table-column
              prop="operator"
              label="执行者"
              width="180">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="执行时间">
            </el-table-column>
            <el-table-column
              prop="address"
              label="备注">
            </el-table-column>
          </el-table>
          </div>
          <div class="content-item" v-show="currentTab == 3" style="width:100%">
             <div style="height:500px;width:1200px" id="eleChart" ref="chart"></div>
             <div style="height:500px;width:1200px" id="eleChart1" ref="mixChart"></div>
          </div>
           <div class="content-item" v-show="currentTab == 4">
            <el-table
            :data="parkingStateData"
            style="width: 100%">
            <el-table-column
              prop="plate"
              label="车牌"
              width="180">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              width="180">
            </el-table-column>
            <el-table-column
              prop="msg"
              width="280"
              label="返回信息">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="时间">
            </el-table-column>
          </el-table>
          </div>
          <div class="user1 back" v-show="currentTab == 5"> 
            <div class="usersdiv">
              <div class="div-three"><div class="grid-content bg-purple-light">vin： {{bmsList.vin}}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">充电次数：{{bmsList.batteryChargeNum }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple-light">额定容量：{{bmsList.batteryCapacity}}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">当前电量：{{bmsList.currentElectricity }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">当前电压：{{bmsList.currentVoltage }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">电池生产厂商：{{bmsList.batteryCompany  }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">电池生产日期：{{bmsList.batteryMadeTime  }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">电池序列号：{{bmsList.batterySn  }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">电池类型：{{bmsList.batteryType  }}</div></div>
              

              <div class="div-three"><div class="grid-content bg-purple">额定电压：{{bmsList.batteryVoltage  }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">动力蓄电池标称总能量：{{bmsList.bcpEnergy  }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">最高允许充电电流：{{bmsList.bcpMaxCurrent  }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">最高允许温度：{{bmsList.bcpMaxTemperature  }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">最高允许充电总电压：{{bmsList.bcpMaxVoltage  }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">单体动力蓄电池最高允许充电电压：{{bmsList.bcpOneMaxVoltage  }}</div></div>
              
              <div class="div-three"><div class="grid-content bg-purple">通信协议版本号：{{bmsList.protocol  }}</div></div>
              <div class="div-three"><div class="grid-content bg-purple">软件版本号：{{bmsList.version }}</div></div>
              </div>
        </div>
        </div>
      </div>

      <div class="user1 back">
        <el-row>
            <el-col :span="24"> <div class="title-left"></div> <div class="grid-content bg-purple-dark title1">用户信息</div></el-col>
          </el-row>
        <div class="usersdiv">
            <div class="div-three"><div class="grid-content bg-purple">姓名：{{order.phone ? order.nick : ''}}</div></div>
            <div class="div-three"><div class="grid-content bg-purple-light">车牌号：{{order.plate}}</div></div>
            <div class="div-three"><div class="grid-content bg-purple-light">手机号： {{order.phone}}</div></div>
          </div>
          <el-row style="height: 30px;">
          </el-row>
      </div>

      
      <div class="user1 back">
        <el-row>
            <el-col :span="24"><div class="title-left"></div><div class="grid-content bg-purple-dark title1">支付信息</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="5" v-for="(item, index) in payList" :key="index"><div class="grid-content bg-purple-light">{{item.payType==1?'个人账户':item.payType==2? '集团个人账户':'集团共享账户'}}：<span class="wz-text">{{item.price}}</span></div></el-col>
          </el-row>
          <el-row style="height: 30px;">
          </el-row>
      </div>
      <div class="detail back">
          <el-row>
              <el-col :span="24"><div class="title-left"></div><div class="grid-content bg-purple-dark title1">费用明细</div></el-col>
            </el-row>
          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">电费：{{order.powerPrice}}</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">服务费：{{order.servicePrice}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">实收电费：{{order.receivedPowerPrice}}</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">实收服务费：{{order.receivedServicePrice}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple-light">优惠：{{order.discount}}</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">实际支付：{{order.amount}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple-light">套餐抵扣金额：{{order.comboDiscount}}</div></el-col>
            <!-- <el-col :span="12"><div class="grid-content bg-purple-light">支付方式：余额扣款</div></el-col> -->
          </el-row>
          <el-row style="margin-left:20px">
            <el-col :span="24">
              <el-table
            :data="cashList"
            style="width: 100%">
            <el-table-column
            style="width:300px"
              prop="time"
              label="时间段"
              width="180">
            </el-table-column>
             <el-table-column
            style="width:300px"
              prop="powerNum"
              label="电量(度)"
              width="180">
            </el-table-column>
            <!-- <el-table-column
              prop="powerTotal"
              label="电费(元)"
              width="180">
            </el-table-column>
            <el-table-column
              prop="serviceTotal"
              label="服务费(元)">
            </el-table-column> -->
            <el-table-column
              prop="receivedElectric"
              label="实收时段电费电价(元)">
            </el-table-column>
            <el-table-column
              prop="receivedService"
              label="实收时段服务费(元)"
              width="180">
            </el-table-column>
            <el-table-column
              prop="receivedPowerTotal"
              label="实收电费(元)">
            </el-table-column>
            <el-table-column
              prop="receivedServiceTotal"
              label="实收服务费(元)"
              width="180">
            </el-table-column>
            <el-table-column
              prop="powerCombo"
              label="套餐抵扣电量(度)">
            </el-table-column>
            <el-table-column
              prop="serviceComboTotal"
              label="套餐抵扣服务费(元)">
            </el-table-column>
            <el-table-column
              prop="powerComboTotal"
              label="套餐抵扣电费(元)">
            </el-table-column>
          </el-table>
            </el-col>
          </el-row>
      </div>

       <!-- 附加费用-->
       <div class="user1 back">
        <el-row>
            <el-col :span="24"><div class="title-left"></div><div class="grid-content bg-purple-dark title1">超时占位费用</div></el-col>
          </el-row>
          <el-row style="margin-left:20px">
            <el-col :span="24">
              <el-table
            :data="outSiteData"
            style="width: 100%">
            <el-table-column
              prop="beginTime"
              label="开始占位时间"
              width="160">
            </el-table-column>
            <el-table-column
            style="width:300px"
              prop="costBeginTime"
              label="开始计费时间"
              width="160">
            </el-table-column>
             <el-table-column
            style="width:300px"
              prop="endTime"
              label="结束计费时间 "
              width="160">
            </el-table-column>
             <el-table-column
              prop="time"
              label="占位时间(分钟)"
              width="120">
            </el-table-column>
            <el-table-column
              prop="total"
              label="合计(元)"
              width="110">
            </el-table-column>
            <el-table-column
              prop="receivedPrice"
              label="实收金额(元)"
              width="120">
            </el-table-column>
            <el-table-column
              prop="ruleText"
              label="计费规则"
              width="180">
            </el-table-column>
           
          </el-table>
            </el-col>
          </el-row>
          <el-row style="height: 30px;">
          </el-row>
      </div>
      <div class="site back">
        <el-row>
            <el-col :span="24"><div class="title-left"></div><div class="grid-content bg-purple-dark title1">桩站信息</div></el-col>
        </el-row>
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark title2">站点信息</div></el-col>
        </el-row>
        <div class="usersdiv">
            <div class="div-two"><div class="grid-content bg-purple">站点ID：{{siteInfo.id}}</div></div>
            <div class="div-two"><div class="grid-content bg-purple-light">站点：{{siteInfo.name}}</div></div>
        </div>
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-light">地址：{{siteInfo.address}}</div></el-col>
            <!-- <el-col :span="12"><div class="grid-content bg-purple-light">地址：</div></el-col> -->
        </el-row>
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark title2">充电桩信息</div></el-col>
        </el-row>
        <div class="usersdiv">
            <div class="div-three"><div class="grid-content bg-purple">充电桩ID：{{order.pileId}}</div></div>
            <div class="div-three"><div class="grid-content bg-purple-light">充电枪ID：{{order.gunId}}</div></div>
            <div class="div-three"><div class="grid-content bg-purple-light">充电枪编码：{{order.gunSn}}</div></div>
        </div>
         <el-row style="margin-left:20px">
            <el-col :span="24">
              <el-table
            :data="currentRate"
            style="width: 100%">
            <el-table-column
            style="width:300px"
              prop="datatime"
              label="时间段"
              width="180">
            </el-table-column>
             <el-table-column
            style="width:300px"
              prop="electric"
              label="电费"
              width="180">
            </el-table-column>
            <el-table-column
              prop="service"
              label="服务费"
              width="180">
            </el-table-column>
            
            <el-table-column
              prop="discount"
              label="服务费折扣">
            </el-table-column>
          </el-table>
            </el-col>
          </el-row>
        <el-row style="height: 30px;">
          </el-row>
      </div>
      <div class="user1 back">
        <el-row>
            <el-col :span="24"><div class="title-left"></div><div class="grid-content bg-purple-dark title1">停止订单</div></el-col>
          </el-row>
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple-light">停止密码 ： {{order.stopPwd }}</div></el-col>
            <el-col :span="16"><div class="grid-content bg-purple">停止原因：{{order.stopReason == 1? '用户停止': order.stopReason == 2?'管理员停止':order.stopReason == 3?'充电桩停止':order.stopReason == 4?'异常停止':order.stopReason == 5?'余额不足':'策越停止'}}</div></el-col>
          </el-row>
          <el-row style="height: 30px;">
          </el-row>
      </div>
      <!-- 停止订单-->
      
    </div>
  </div>
</template>
<script>
import Panel from "@/components/Panel/use.vue";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import FileUpload from '@/components/FileUpload';
import request from "@/tools/request";
import { numToStringTime } from "@/tools/array";

export default {
  name:'orderThirdInfo_',
  components: {
    FileUpload,
    Panel,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
      order:{},
      payList:[],
      bmsList:{
        vin: '无',
        batteryCapacity: '无',
        batteryChargeNum : '无',
        batteryCompany : '无',
        batteryMadeTime : '无',
        batterySn : '无',
        batteryType : '无',
        batteryVoltage : '无',
        bcpEnergy: '无',
        bcpMaxCurrent : '无',
        bcpMaxTemperature: '无',
        bcpMaxVoltage : '无',
        bcpOneMaxVoltage: '无',
        currentElectricity : '无',
        currentVoltage : '无',
        protocol : '无',
        version : '无',
      },
      activeState:1,
      cashList:[],
      configValue:"",
      editorOption: {},
      currentRate:[],
      typeList: [],
      siteInfo:{},
      sitePrice:[],
      priceDetail:[],
      orderLog:[],
      parkingStateData:{},
      temporaryData: {
        coverImg: [],
        publishStatus: false
      },
      outSiteData:[],
      currentTab:1,
      navTab:[
        {'id':1,'name':'订单轨迹'},
        {'id':2,'name':'轨迹明细'},
        {'id':3,'name':'充电曲线'},
        {'id':4,'name':'停车减免日志'},
        {'id':5,'name':'BMS电池信息'}
      ],
      sitePrice: [],
      editColumn: [
        {
          name: "充电枪名称",
          prop: "name",
          type: "text",
          width:24,
          required: true
        },
        {
          name: "编号",
          prop: "parkNo",
          type: "text",
          width:24,
          required: true
        },
        {
          name: "备注",
          width: 24,
          prop: "mark",
          type: "number",
          required: true
        },
      ],
    };
  },
  computed: {
 

  },
  methods: {
   async updateData(values) {
     values.coverImg = values.coverImg[0]
     const {coverImg, details, id, name, publishStatus, sort, typeId} = values
     await POST('/news/addOrUpdate', {coverImg, details, id, name, publishStatus, sort, typeId})
      this.$message.success('编辑成功')
      this.$router.go(-1)
    },
    changeTab(tab){
      this.currentTab = tab
    },
    async fetchData(id, type){
      let urls = type== 'wx'?  '/order/wx/info/': '/order/third/info/'
      var res = await request({
        url: urls+id,
        method: "GET",
        data: {}
      });
      if(res.wxOrder){
        res.info = res.wxOrder
      }
      
      if(res.info.chargeTime){
        let chargeTime = res.info.chargeTime
        let shi = parseInt(chargeTime/3600) 
        let hour = shi >=10 ? shi : '0'+shi
        let min  =  Math.ceil((chargeTime - (parseInt(chargeTime/3600))*3600)/60)
        min = min >=10 ? min : '0'+min
        res.info.surplus = hour + "小时" + min +"分钟"
      }

      let order =  res.info
      order.active = 1
      if(order.state>=2){
        order.active = 2
      }
      if(order.state==4 || order.state ==5 || order.state ==6){
        order.active  = 3
      }
      if(order.state ==4 && order.settlement==1){
        order.active = 4
      }
       order.stateMsg = order.state==1 ? "等待处理中":order.state==2 ? "充电中":order.state==3 ? "充电停止中":order.state==4 ? "充电完成":order.state==5 ? "充电异常":order.state==6 ? "充电失败":"等待处理中"
     
      this.order =order
      if(this.order.state < 2 || this.order.state ==5 || this.order.state == 6){
        this.activeState = 1
        
      }else if(this.order.state < 4){
        this.activeState = 2
      }else if(this.order.state == 4 && this.order.settlement == 1){
        this.activeState = 4
      }else{
         this.activeState = 3
      }
      // console.log('订单轨迹',this.activeState,this.order.state)
      this.getsiteInfo(res.info.siteId)
      this.siteRate(res.info.siteId)
    },
    async outSite(id){
      let res = await request({
        url: "/order/seat/info/"+id,
        method: "GET",
        data: {}
      });
      // console.log('超时占位费',res)
      res.list.map(item => {
        // item.type = item.type ==1 ? "超时占用费": item.type ==1 ? "预约费" : '其他'
        if(item.time){
                item.time = numToStringTime(item.time)
            }
            if(item.rule){
             var stage = (item.rule.stage /60).toFixed(0)
              item.ruleText = `每${stage}分钟${item.rule.price}元，${item.rule.capping}元封顶`
            }
        return item
      })
      this.outSiteData = res.list
    },
    async bms(id){
      let res = await request({
        url: "/order/bms/info/"+id,
        method: "GET",
        data: {}
      });
      // console.log('bms',res)
      if(res.bms){
       this.bmsList = res.bms
      }
      
    },
    async pays(id){
      let res = await request({
        url: "/order/pays/"+id,
        method: "GET",
        data: {}
      });
       console.log('pays',res)
      if(res.code ==0){
       this.payList = res.info
      }
    },
    //订单轨迹
    async getsiteInfo(id){
      let res = await request({
        url: "/iot/site/info/"+id,
        method: "GET",
        data: {}
      });
      // console.log('站点信息',res)
      this.siteInfo = res.info
    },
    //订单明细
    async orderLogFn(id){
      let { list } = await request({
        url: "/log/order/list/"+id,
        method: "GET",
        data: {}
      });
     
      // console.log('订单明细',list)
      this.orderLog = list
    },
    //停车减免状态
    async parkingState(id){
      let { exemption } = await request({
        url: "/plate/exemption/log/"+id,
        method: "GET",
        data: {}
      });
      exemption.map(item => {
        item.state = item.state == 1? "减免成功": "减免失败"
        return item
      })
      // console.log('停车减免状态',exemption)
      this.parkingStateData = exemption
    },
    //费用明细表
    async recording(id){
      let { list } = await request({
        url: "/order/tage/pricing/"+id,
        method: "GET",
        data: {}
      });
      
        console.log('费用明细表',list)
       list.map(item => {
         //var index=item.beginTime.lastIndexOf("\ ");
         //item.beginTime = item.beginTime.substring(index+1,item.beginTime.length);
         //item.endTime = item.endTime.substring(index+1,item.endTime.length);
         item.time = `${item.beginTime} - ${item.endTime}`
         return item
       })
       this.cashList = list
      // this.cordChart()
     
    },
    //充电曲线电流图
    async cordChart(id){
      let res = await request({
        url: "/order/recording/"+id,
        method: "GET",
        data: {}
      });
     
      // console.log('充电曲线电流图',res)
       let ele_time = []
      let ele_cur = []
      let ele_cur_need = []
      let ele_vol = []
      let ele_vol_meed = []
      let total_ele = []
      let soc = []
      let temGun = []
      let temFeng = []
      if(res.code == 0){
        res.list.map((item) => {
          ele_time.push(item.createTime)
          ele_cur.push(item.supplyCurrent)
          ele_cur_need.push(item.carCurrent)
          ele_vol.push(item.supplyVoltage)
          ele_vol_meed.push(item.carVoltage)
          total_ele.push(item.electricity)
          soc.push(item.soc)
          temGun.push(item.gunTemperature)
          temFeng.push(item.outTemperature)
        })
      }
        // 基于准备好的dom，初始化echarts实例
        var bar_dv = this.$refs.chart;
        let myChart = this.$echarts.init(bar_dv)
        // 基于准备好的dom，初始化echarts实例
        var bar_dv1 = this.$refs.mixChart;
        let myChart1 = this.$echarts.init(bar_dv1)
        // 绘制图表
       myChart.setOption({
        title: {text: '电压、电流曲线',subtext:'电压(需求电压)/时间、电流(需求电流)/时间',left: 'center' },
        color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        legend: {
            data: ['电流', '需求电流', '电压', '需求电压'],
            left: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              crossStyle: {
                  color: '#999'
              }
          }
      },
      toolbox: {
          feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line','bar']},
              restore: {show: true},
              saveAsImage: {show: true}
          }
      },
      xAxis: [
          {
              type: 'category',
              data: ele_time,
              axisPointer: {
                  type: 'shadow'
              }
          }
      ],
      yAxis: [
        {
            type: 'value',
            name: '电流/电压',
            min: 0,
            max: 1000,
            interval: 200,
            axisLabel: {
                formatter: '{value}(A/V)'
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value}度'
            }
        }
      ],
      series: [
          {
              name: '电流',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              data: ele_cur
          },
          {
              name: '需求电流',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              data: ele_cur_need
          },
          {
              name: '电压',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              data: ele_vol
          },
          {
              name: '需求电压',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              data: ele_vol_meed
          },
          {
              name: '充电枪温度',
              type: 'line',
              yAxisIndex: 1,
              smooth: true,
              data: temGun
          },
          {
              name: '出风口温度',
              type: 'line',
              yAxisIndex: 1,
              smooth: true,
              data: temFeng
          }
      ]
        });
         //绘制图表2
        myChart1.setOption({
        title: {text: '累计电量、电池soc',left: 'center' },
        color:['#fc8452', '#73c0de', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        legend: {
            data: ['累计电量（度）', '电池容量（%）'],
            left: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              crossStyle: {
                  color: '#999'
              }
          }
      },
      toolbox: {
          feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line','bar']},
              restore: {show: true},
              saveAsImage: {show: true}
          }
      },
      xAxis: [
          {
              type: 'category',
              data: ele_time,
              axisPointer: {
                  type: 'shadow'
              }
          }
      ],
      yAxis: [
        {
            type: 'value',
            name: '累计电量（度）',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '电池容量（%）',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value}'
            }
        }
      ],
      series: [
          {
              name: '总用电量(度)',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              data:total_ele
          },
          {
              name: '电池容量(%)',
              type: 'bar',
              yAxisIndex: 1,
              data: soc
          },
      ]
        });
 
    },
    //充电进度图
    async amoutChart(id){
       let res = await request({
        url: `/order/rate/${id}`,
        method: "GET",
      });
      let currentRate = res.rate.rates
      currentRate.map( item => {
        item.datatime = item.beginTime +'-'+item.endTime
        return item
      })
      this.currentRate = currentRate
      // console.log('当日时间段',res)
    },
    //充电桩费率
    async siteRate(id){
      let res = await request({
        url: `/rate/group/time/list/site/${id}`,
        method: "GET",
        data: {}
      });
      res.list.map( item => {
        item.datatime = item.beginTime +'-'+item.endTime
        return item
      })
      this.sitePrice = res.list
      // console.log('充电站费率',res)
    },
    //计费信息
    async countPrice(id){
      let res = await request({
        url: "/order/tage/pricing/"+id,
        method: "GET",
        data: {}
      });
      // console.log('计费信息',res)
    },
  },
  
  created() {
    // console.log('params',this.$route.params)
    if(this.$route.query.id)
      this.fetchData(this.$route.query.id, this.$route.query.type)
      this.orderLogFn(this.$route.query.id)
      this.recording(this.$route.query.id)
      this.parkingState(this.$route.query.id)
      this.outSite(this.$route.query.id)
      this.bms(this.$route.query.id)
      this.pays(this.$route.query.id)
  },
  mounted() {
    this.cordChart(this.$route.query.id)
    this.amoutChart(this.$route.query.id)
  }
};
</script>
<style lang='scss' scoped >
.orderinfo {
  background-color: #EEF0F3 !important;
}
.usersdiv {
    display: flex;
    flex-wrap: wrap;
}
.div-three{
  min-width: 30%;
}
.div-two{
  min-width: 50%;
}
 th .is-leaf {
   background-color: #efefef;
}
.site .el-col {
  margin-bottom: 10px;
}
.detail .el-col {
  margin-bottom: 10px;
}
.detail-body {
  
  width: 100%;
  .title1{
    padding: 12px 0;
    font-size: 17px;
    color: #000;
  }
}
.back {
background-color: white;
margin-top: 10px;
.title-left {
    width: 5px;
    height: 14px;
    background: #f18414;
    margin-left: 25px;
    margin-right: 3px;
    border-radius: 10px;
}
.el-row  .el-col {
  display: flex;
  align-items: center;
}
}
.grid-content.bg-purple {
    padding: 8px 25px;
    color: rgba(0,0,0,.65);
    font-size: 14px;
}
.grid-content.bg-purple-light{
  padding: 7px 25px;
    color: rgba(0,0,0,.65);
    font-size: 14px;
}
.title2 {
    padding: 12px 25px;
    font-size: 21px;
    color: #000;
}
.navbar-content{
  margin-left: 20px;
  padding-bottom: 32px;
}
.navTab {
  height: 78px;
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 19px;
  margin-left: 20px;
}
.navbar {
    width: 120px;
    text-align: center;
    font-size: 16px;
    
  .navbar-item {
    cursor: pointer;
  }
}
// table thead tr td{
//   background-color: #ececec;
// }
.active {
  color: #3a86e4;
  border-bottom: 2px solid #547ff7;
}
</style>